<template>
    <div class="log_c" style="width: 700px; margin-right: 450px;">
        <h1 style="text-align: center; margin-top: 10px;">忘记密码</h1>
        <form>
            <table border="0" style="width: 500px; font-size: 14px; margin-top: 40px;margin-bottom: 30px;">
                <!-- <tr height="50" valign="top">
                    <td width="55">&nbsp;</td>
                    <td>
                        <span class="fl" style="font-size: 24px">登录</span>
                        <span class="fr">还没有商城账号，<a href="#" @click="toRegister" style="color: #ff4e00">立即注册</a></span>
                    </td>
                </tr> -->
                <tr height="70">
                    <td>邮&nbsp;&nbsp;箱：</td>
                    <td><input type="text" value="" class="l_user" v-model="email" @click="checkEamil" /></td>
                    <td style="color: red;">{{ emailError }}</td>
                </tr>
                <tr height="70">
                    <td>验证码：</td>
                    <td>
                        <input type="text" value="" class="l_ipt" v-model="emailCode" />
                        <button
                            style="background-color: #ff4e00;width: 130px; height: 40px;color: white;border: none;margin-left: 30px;text-align:center;line-height: 40px;"
                            @click.prevent="sendEmail">
                            {{ codeMsg }}
                        </button>
                    </td>

                    <td style="color: red;">{{ emailCodeError }}</td>
                </tr>
                <tr height="70">
                    <td>新密码：</td>
                    <td><input type="password" value="" class="l_pwd" v-model="password" @blur="checkPassword" /></td>
                    <td style="color: red;">{{ passwordError }}</td>
                </tr>
                <!-- <tr>
                    <td>&nbsp;</td>
                    <td style="font-size: 12px; padding-top: 20px">
                        <span style="font-family: '宋体'" class="fl">
                            <label class="r_rad"><input type="checkbox" /></label><label
                                class="r_txt">请保存我这次的登录信息</label>
                        </span>
                        <span class="fr"><a href="#" style="color: #ff4e00">忘记密码</a></span>
                    </td>
                </tr> -->
                <tr height="60">
                    <td>&nbsp;</td>
                    <td><input type="button" @click="toLogin" value="确认" class="log_btn" /></td>
                </tr>
            </table>
        </form>
    </div>
</template>

<script>
export default {
    name: 'ForgetPassword',
    data() {
        return {
            user: null,
            email: '',
            password: '',
            emailCode: '',
            emailError: '',
            emailCodeError: '',
            passwordError: '',
            codeMsg: '发送验证码',
            isCounting: false,
            countDown: 120,
            timer: null,
        }
    },
    methods: {
        checkEamil() {
            if (this.email == '') {
                this.emailError = '邮箱不能为空！'
                return false
            }
            let partten = /^[^\s@]+@[^\s@]+.[^\s@]+$/
            if (!partten.test(this.email)) {
                this.emailError = '邮箱格式不正确！'
                return false
            } else {
                this.$axios({
                    url: '/checkEmail',
                    method: 'get',
                    params: { email: this.email }
                }).then(rs => {
                    if (rs.data.code == 5500 || rs.data.code == "5500") {
                        this.emailError = ''
                        return true
                    } else {
                        this.emailError = '邮箱不存在！'
                        return false
                    }
                })
            }
        },
        checkCode() {
            if (this.emailCode == '') {
                this.emailCodeError = '请输入验证码！'
                return false
            } else {
                this.$axios({
                    url: '/checkCode',
                    method: 'get',
                    params: { code: this.emailCode }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == "5200") {
                        this.emailCodeError = ''
                        return true
                    } else {
                        this.emailCodeError = '验证码错误！'
                        return false
                    }
                })
            }
        },
        sendEmail() {
            if (this.isCounting) {
                return
            }
            this.$axios({
                url: '/sendEmail',
                method: 'get',
                params: { email: this.email }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == "5200") {
                    alert('验证码已发送！')
                    this.startCountdown()
                } else {
                    alert('验证码发送失败！')

                }
            })
        },
        startCountdown() {
            this.isCounting = true;
            this.countdown = 120;

            this.timer = setInterval(() => {
                this.countdown--;
                this.codeMsg = `${this.countdown}秒后重新获取`;
                if (this.countdown <= 0) {
                    this.stopCountdown();
                }
            }, 1000);
        },
        stopCountdown() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
            this.isCounting = false;
            this.codeMsg = '获取验证码';
        },
        checkPassword() {

            if (this.password == '') {
                this.passwordError = '请输入密码！'
                return false
            }
            if (this.password.length > 9 || this.password.length < 6) {
                this.passwordError = '密码格式错误（长度6-9）'
                return false
            }
            this.passwordError = ''
            return true
        },
        updatePassword(id) {
            this.$axios({
                url: 'updateUser',
                method: 'post',
                data: { id: id, password: this.password },
                headers: {
                    'content-type': 'application/json'
                }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    return true
                } else {
                    return false
                }
            })
        },
        toLogin() {
            console.log("-----", this.checkPassword())
            if (this.checkEamil() && this.checkCode() && this.checkPassword()) {
                this.$axios({
                    url: "selectUserByEmail",
                    method: 'get',
                    params: { email: this.email }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == '5200') {
                        this.user = rs.data.user
                        if (this.updatePassword(this.user.id)) {
                            alert('修改成功！')
                            this.$router.push('/login')
                        } else {
                            alert('修改失败！')
                        }
                    } else {
                        alert('修改失败！')
                    }
                })
            }
        }
    }
}
</script>

<style></style>